html,
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: $secondary-color;

  body {
    padding: $spacing-40 $grid-margin-xlarge;
    max-width: 1200px;
    user-select: none;

    .current-weather-section {
      display: flex;
      justify-content: center;
      width: 100%;

      & > * {
        width: calc((100% - 48px) / 4);
        margin-right: $spacing-16;

        &:last-child {
          margin-right: $spacing-0;
        }

        @include media-query("xlarge") {
          width: calc((100% - 16px) / 2);

          &:nth-child(n) {
            margin-bottom: $spacing-16;
          }

          &:nth-child(2n) {
            margin-right: $spacing-0;
          }

          &:nth-last-child(-n + 2) {
            margin-bottom: $spacing-0;
          }

          &:nth-child(3) {
            order: 1;
            margin-right: $spacing-0;
            margin-left: $spacing-16;
          }
        }

        @include media-query("small") {
          width: 100%;

          &:nth-child(n) {
            margin-right: $spacing-0;
            margin-left: $spacing-0;
            margin-bottom: $spacing-16;
          }

          &:nth-child(3) {
            order: 0;
          }

          &:last-child {
            margin-bottom: $spacing-0;
          }
        }
      }

      @include media-query("xlarge") {
        flex-wrap: wrap;
      }
    }

    .daily-forecast-section {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-row-gap: $spacing-16;
      grid-column-gap: $spacing-16;
      width: 100%;

      @include media-query("xlarge") {
        grid-template-columns: repeat(3, 1fr);
      }

      @include media-query("large") {
        grid-template-columns: repeat(2, 1fr);
      }

      @include media-query("small") {
        grid-template-columns: 1fr;
      }
    }

    @include media-query("xlarge") {
      padding: $spacing-32 $grid-margin-large;
    }

    @include media-query("large") {
      padding: $spacing-24 $grid-margin-medium;
    }

    @include media-query("medium") {
      padding: $spacing-20 $grid-margin-small;
    }

    @include media-query("small") {
      padding: $spacing-16 $grid-margin-xsmall;
    }
  }
}
